<template>
  <view class="container">
    <!-- 头部待支付 -->
    <view class="waitpay" v-if="waitpay">
      <view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff">等待您的支付</view>
        <view style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff; margin-top: 20rpx">还剩29分自动取消</view>
      </view>
      <image src="/sub_my/static/waitpay.png" style="width: 94rpx; height: 94rpx"></image>
    </view>
    <!-- 头部代发货品 -->
    <view class="waitpay" v-if="cancelorder">
      <view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff">等待您的支付</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff; margin-top: 20rpx">等待平台进行发货</view>
      </view>
      <image src="/sub_my/static/waitdeliver.png" style="width: 94rpx; height: 94rpx"></image>
    </view>
    <!-- 拼团中 -->
    <view class="waitpay" v-if="puntuan">
      <view>
        <view style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff">拼团中</view>
      </view>
      <image src="/sub_my/static/pintuan.png" style="width: 94rpx; height: 94rpx"></image>
    </view>
    <!-- 待收货 -->
    <view class="waitpay" v-if="waitrecived">
      <view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff">待收货</view>
        <view style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff; margin-top: 20rpx">还剩6天23时自动确认收货</view>
      </view>
      <image src="/sub_my/static/waitreceived.png" style="width: 94rpx; height: 94rpx"></image>
    </view>
    <!-- 交易完成 -->
    <view class="waitpay" v-if="buycomplete">
      <view>
        <view style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff">交易完成</view>
      </view>
      <image src="/sub_my/static/buycomplete.png" style="width: 94rpx; height: 94rpx"></image>
    </view>
    <!-- 订单未支付超时 (自动取消和手动取消)-->
    <view class="waitpay" v-if="true">
      <view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff">订单关闭</view>
        <view v-if="false" style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff; margin-top: 20rpx">超时未支付，订单关闭</view>
        <view v-if="false" style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff; margin-top: 20rpx">
          用户手动取消（订单金额已原路返还）
        </view>
        <view v-if="false" style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff; margin-top: 20rpx">
          商家取消订单（订单金额已原路返还）
        </view>
        <view v-if="true" style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #ffffff; margin-top: 20rpx">拼团失败（订单金额已原路返还）</view>
      </view>
      <image src="/sub_my/static/close.png" style="width: 94rpx; height: 94rpx"></image>
    </view>
    <!-- 用户信息 -->
    <view class="address">
      <view>
        <uni-icons type="location" size="30"></uni-icons>
      </view>
      <view class="userinfo">
        <view class="name">
          <text>张三</text>
          <text style="padding-left: 28rpx">1888888888</text>
        </view>
        <view class="place">河南省郑州市金水区金水路208号29888号</view>
      </view>
    </view>
    <!-- 商品信息 -->
    <view class="goodsstatus">
      <veiw class="itemheader">
        <view class="itemheaderleft">
          <image src="/sub_my/static/myshop.png" mode="" class="shoplogo"></image>
          <view class="shopname">华为旗舰店</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </veiw>
      <view class="iteminfon">
        <image src="/static/image/default-avatar.png" mode="" class="goodsimage"></image>
        <view class="goodsinfo">
          <view class="goodstitle">华为 P50 直屏影像 华为 P50 直华为 P50 直屏影像 华为 P50</view>
          <view class="goodstypes">火山红；12+256</view>
          <view class="pricebox">
            <view class="price">￥39.00</view>
            <view class="count">x3</view>
          </view>
        </view>
      </view>
      <view class="totalprice">
        <view class="pintuanicon" v-if="puntuan">拼</view>
        <text style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222">订单金额：</text>
        <text style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #f10000">￥438.00</text>
      </view>
    </view>
    <!-- 订单信息 -->
    <view class="orderinfo">
      <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">订单信息</view>
      <view style="margin-top: 26rpx">
        <text style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222">订单编号：236669851233</text>
        <text style="font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; padding-left: 32rpx" @click="copytext">复制</text>
      </view>
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-top: 26rpx">订单备注：请尽快发货</view>
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-top: 26rpx">创建时间：2022-02-22 09:23:12</view>
      <!-- 订单超时未支付 ，订单关闭时间 -->
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-top: 26rpx">关闭时间：2022-02-22 09:23:12</view>
      <!-- 代发货---- 支付时间 -->
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-top: 26rpx">支付时间：2022-02-22 09:23:12</view>
      <!-- 待收货---发货时间 -->
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-top: 26rpx">发货时间：2022-02-22 09:23:12</view>
      <!-- 待收货---快递名称 -->
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-top: 26rpx">快递名称：中通快递</view>
      <!-- 待收货---快递单号 -->
      <view style="margin-top: 26rpx">
        <text style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222">快递单号：255669985554663</text>
        <text style="font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; padding-left: 32rpx" @click="copytext">复制</text>
      </view>
      <!-- 交易完成 -->
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-top: 26rpx">完成时间：2022-02-22 09:23:12</view>
    </view>
    <!-- 立即支付按钮 -->
    <view class="pay" v-if="waitpay">立即支付</view>
    <!-- 取消订单按钮 -->
    <view v-if="cancelorder" class="cancelpay" @click="$refs.cancelorderRef.open()">取消订单</view>
    <!-- 确认收获按钮 -->
    <view class="okrecived" v-if="waitrecived" @click="$refs.recevorderRef.open()">确认收货</view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
    <!-- 取消订单的弹框 -->
    <uni-popup ref="cancelorderRef" type="center">
      <view class="okpay">
        <view style="height: 190rpx; text-align: center; line-height: 190rpx">
          <!-- 余额充足 -->
          <view>
            <text style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">确认取消该订单？</text>
          </view>
        </view>
        <view style="display: flex">
          <view class="okbtn" @click="$refs.cancelorderRef.close()">取消</view>
          <view class="okbtn" @click="confirm">确认</view>
        </view>
      </view>
    </uni-popup>
    <!-- 点击收获的弹框 -->
    <uni-popup ref="recevorderRef" type="center">
      <view class="okpay">
        <view style="height: 190rpx; text-align: center; line-height: 190rpx">
          <!-- 余额充足 -->
          <view>
            <text style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">确认已收到宝贝？</text>
          </view>
        </view>
        <view style="display: flex">
          <view class="okbtn" @click="$refs.recevorderRef.close()">取消</view>
          <view class="okbtn" @click="confirm">确认</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import footerCom from '@/components/shopfooter/shopfooter.vue';
export default {
  components: {
    footerCom
  },
  data() {
    return {
      waitpay: false,
      cancelorder: false,
      puntuan: false,
      waitrecived: false,
      buycomplete: false
    };
  },
  methods: {
    copytext() {
      uni.setClipboardData({
        data: '', // 复制的到剪切板的内容
        success: function () {
          //调用方法成功
          console.log('success');
        }
      });
    },
    // 确认取消订单
    confirm() {}
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .waitpay {
    box-sizing: border-box;
    padding: 34rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
    height: 180rpx;
    background: #61bdb2;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .address {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 750rpx;
    height: 172rpx;
    background: #ffffff;

    padding: 34rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .userinfo {
      margin-left: 20rpx;
      .name {
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: #222222;
      }
      .place {
        font-size: 28rpx;
        margin-top: 16rpx;
      }
    }
  }
  .goodsstatus {
    box-sizing: border-box;
    padding: 20rpx;
    width: 750rpx;
    height: 324rpx;
    background: #ffffff;
    margin-top: 20rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    .itemheader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .itemheaderleft {
        display: flex;
        align-items: center;
      }
      .shoplogo {
        width: 52rpx;
        height: 52rpx;
      }
      .shopname {
        margin-left: 10rpx;
        font-size: 28rpx;
      }
    }
    .iteminfon {
      display: flex;
      margin-top: 20rpx;
      .goodsimage {
        width: 128rpx;
        height: 128rpx;
        margin-right: 12rpx;
      }
      .goodsinfo {
        margin-right: 30rpx;
        .goodstitle {
          width: 500rpx;
          height: 40rpx;
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #222222;
          margin-top: 10rpx;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行
        }
        .goodstypes {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #666666;
          margin-top: 20rpx;
        }
        .pricebox {
          display: flex;
          justify-content: space-between;
          margin-top: 18rpx;
          .price {
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            color: #f10000;
          }
          .count {
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
    .totalprice {
      text-align: right;
      margin-top: 10rpx;
      margin-right: 60rpx;
      .pintuanicon {
        display: inline-block;
        width: 60rpx;
        height: 36rpx;
        text-align: center;
        line-height: 36rpx;
        background: #f10000;
        color: #fff;
        margin-right: 20rpx;
        font-size: 26rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
      }
    }
  }
  .orderinfo {
    box-sizing: border-box;
    margin-top: 16rpx;
    padding: 20rpx 28rpx;
    width: 750rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .pay {
    width: 640rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    background: #61bdb2;
    margin-left: 56rpx;
    margin-top: 100rpx;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
  }
  .cancelpay {
    width: 640rpx;
    height: 100rpx;
    background: #f8f8f8;
    text-align: center;
    line-height: 100rpx;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    border: 2rpx solid #a7a7a7;
    margin-left: 56rpx;
    margin-top: 100rpx;
  }
  .okpay {
    width: 558rpx;
    height: 290rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .okbtn {
      width: 278rpx;
      height: 98rpx;
      text-align: center;
      line-height: 98rpx;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
  .okrecived {
    width: 640rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    background: #61bdb2;
    color: #fff;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    margin-top: 72rpx;
    margin-left: 52rpx;
  }
}
</style>
